<template>
    <a-modal :title="title" :visible="visible" :footer="null" width="60%" @cancel="reset">
        <a-form labelAlign="left" :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-row :gutter="48">
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="选择品牌" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select v-decorator="['brand', { rules: [{ required: true, message: '请选择品牌' }] }]"
                            placeholder="请选择品牌" @change="handleSelectChange">
                            <a-select-option :value="item.name" v-for="item in brand" :key="item.weid">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-switch v-decorator="['status', { valuePropName: 'checked' }]" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="门店编码" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input-search placeholder="请输入门店编码"
                            v-decorator="['code', { rules: [{ required: true, message: '请输入门店编码' }] }]"
                            @search="search" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="门店类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select v-decorator="['manageType', { rules: [{ required: true, message: '请选择门店类型' }] }]"
                            placeholder="请选择门店类型">
                            <a-select-option :value="item.name" v-for="item in storeTypee" :key="item.key">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="品牌名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入品牌名称"
                            v-decorator="['name', { rules: [{ required: true, message: '请输入品牌名称' }] }]" />
                    </a-form-item>
                </a-col>

                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="省" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入省" v-decorator="['province']" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="市" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入市" v-decorator="['city']" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="区" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入区" v-decorator="['country']" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="详细地址" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input-search placeholder="请输入详细地址"
                            v-decorator="['address', { rules: [{ required: true, message: '请输入详细地址' }] }]"
                            @search="getLocation" />
                        <!-- <a-input
                placeholder="请输入详细地址"
                v-decorator="['address', { rules: [{ required: true, message: '请输入详细地址' }] }]"
              /> -->
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="经纬度" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入经纬度"
                            v-decorator="['longitudeLatitude', { rules: [{ required: true, message: '请输入经纬度' }] }]" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="经度" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input-number placeholder="请输入经度"
                            v-decorator="['longitude', { rules: [{ required: true, message: '请输入经度' }] }]" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="纬度" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input-number placeholder="请输入纬度"
                            v-decorator="['latitude', { rules: [{ required: true, message: '请输入纬度' }] }]" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="电话" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入电话" v-decorator="['tel']" />
                    </a-form-item>
                </a-col>
                <a-col :md="formItemCol" :sm="24">
                    <a-form-item label="weid" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入weid"
                            v-decorator="['weId', { rules: [{ required: true, message: '请输入weid' }] }]" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :md="24" :sm="24" class="btn-group">
                    <span class="table-page-search-submitButtons">
                        <a-button type="primary" @click="handleSubmit">提交</a-button>
                        <a-button style="margin-left: 50px" @click="reset">取消</a-button>
                    </span>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>
<script>
import { getStoreInfoByCode, addStore, updateStore } from '@/api/micromall'
import axios from 'axios'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        editInfo: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            title: '新增门店',
            formItemCol: 12,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            shop: null,
            storeTypee: [
                {
                    name: '直营',
                    key: 'zy'
                },
                {
                    name: '经销',
                    key: 'jx'
                }
            ],
            brand: [
                {
                    weid: 2738574294,
                    name: 'JNBY'
                },
                {
                    weid: 2822095692,
                    name: 'less'
                },
                {
                    weid: 2504948039,
                    name: 'CROQUIS'
                },
                {
                    weid: 4,
                    name: 'jnby by JNBY'
                },
                {
                    weid: 6924108367,
                    name: 'Pomme de terre'
                },
                {
                    weid: 15,
                    name: 'APN73'
                },
                {
                    weid: 8348044436,
                    name: 'JNBYHOME'
                },
                {
                    weid: 11,
                    name: 'Outlet'
                },
                {
                    weid: 5,
                    name: '江南布衣+'
                }
            ],
            form: this.$form.createForm(this)
        }
    },
    watch: {
        editInfo: {
            immediate: true,
            handler: function (n) {
                console.log('编辑：', n)
                if (n != null) {
                    this.title = '编辑门店'
                    this.$nextTick(() => {
                        this.form.setFieldsValue({
                            brand: n.brand,
                            status: n.status == 'Y',
                            code: n.code,
                            manageType: n.manageType,
                            name: n.name,
                            province: n.province,
                            city: n.city,
                            country: n.country,
                            address: n.address,
                            tel: n.tel,
                            longitudeLatitude: n.longitudeLatitude,
                            latitude: n.latitude,
                            longitude: n.longitude,
                            weId: n.weId
                        })
                    })
                } else {
                    console.log(this)
                    this.$nextTick(() => {
                        console.log('nextTick',this)
                        this.form.setFieldsValue({
                            status: true
                        })
                    })
                    this.title = '新增门店'
                }
            }
        }
    },
    methods: {
        async search(code) {
            const re = await getStoreInfoByCode(code)
            // re.data.status = re.data.status == 'Y'
            let address = re.data.province + re.data.country + re.data.city + re.data.address
            const location = await this.getLatAndLng(address)
            const { latitude, longitude } = location
            re.data.longitudeLatitude = longitude + ',' + latitude
            re.data.latitude = latitude
            re.data.longitude = longitude
            this.shop = re.data
            this.$nextTick(() => {
                this.form.setFieldsValue({
                    brand: re.data.brand,
                    status: re.data.status == 'Y',
                    code: re.data.code,
                    manageType: re.data.manageType,
                    name: re.data.name,
                    province: re.data.province,
                    city: re.data.city,
                    country: re.data.country,
                    address: re.data.address,
                    tel: re.data.tel,
                    longitudeLatitude: re.data.longitudeLatitude,
                    latitude: re.data.latitude,
                    longitude: re.data.longitude,
                    weId: re.data.weId
                })
            })
        },
        getLatAndLng(address) {
            return new Promise((resolve, reject) => {
                axios
                    .post('https://jic.jnby.com/open/open-center/open-api/map/baidu/location', {
                        address
                    })
                    .then(re => {
                        console.log(re)
                        if (re.data.code == 200) {
                            let { lat: latitude, lng: longitude } = re.data.data.location
                            latitude = parseFloat(latitude).toFixed(6)
                            longitude = parseFloat(longitude).toFixed(6)
                            let obj = {
                                longitudeLatitude: longitude + ',' + latitude,
                                latitude,
                                longitude
                            }
                            resolve(obj)
                        } else {
                            this.$message.warning('搜索地址失败')
                            reject({ longitudeLatitude: '', latitude: 0, longitude: 0 })
                        }
                    })
                    .catch(err => {
                        this.$message.warning('搜索地址失败')
                        console.log(err)
                    })
            })
        },
        async getLocation(address) {
            const { country, city } = this.form.getFieldsValue()
            address = city + country + address
            const re = await this.getLatAndLng(address)
            const { longitude, latitude } = re
            this.$nextTick(() => {
                this.form.setFieldsValue({
                    longitudeLatitude: longitude + ',' + latitude,
                    latitude,
                    longitude
                })
            })
        },
        handleSubmit(e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log(values)
                    values.status = values.status ? 'Y' : 'N'
                    values.longitude = parseFloat(values.longitude)
                    values.latitude = parseFloat(values.latitude)
                    this.submit(values)
                }
            })
            //   console.log('submit!', this.form)
        },

        submit(values) {
            const { editInfo } = this
            if (editInfo != null) {
                // values = Object.assign(editInfo,values)
                values['id'] = editInfo.id
                this.editSubmit(values)
            } else {
                values['id'] = this.shop.id
                this.addSubmit(values)
            }
        },
        closeSubmit(msg) {
            this.$message.success(msg, 3)
            this.$emit('close', true)
            this.form.resetFields()
        },
        // 新增
        async addSubmit(values) {
            const re = await addStore(values)
            if (re.code == 200) {
                this.closeSubmit('新增成功')
            } else {
                this.$message.warning(re.msg)
            }
        },
        // 编辑
        async editSubmit(values) {
            const re = await updateStore(values)
            if (re.code == 200) {
                this.closeSubmit('修改成功')
            }
        },
        reset() {
            console.log(23)
            this.form.resetFields()
            this.$emit('close', false)
        },
        handleSelectChange(value, e) {
            this.$nextTick(() => {
                this.form.setFieldsValue({
                    weId: e.data.key
                })
            })
        },
        handleOk(e) { },
        handleCancel(e) {
            console.log('Clicked cancel button')
            this.visible = false
        }
    }
}
</script>
<style scoped>
.btn-group {
    display: flex;
    justify-content: center;
}

.ant-input-number {
    width: 100%;
}
</style>
  